<!--
 * @Author: suo.tianbao suo.tianbao@vpclub.cn
 * @Date: 2023-12-29
 * @LastEditors: suo.tianbao suo.tianbao@vpclub.cn
 * @LastEditTime: 2023-12-29
 * @FilePath: /element-admin/src/views/GitUsers.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div id="QuartzCal-page">
    <!--顶部搜索栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-form :inline="true" :model="query" class="demo-form-inline">
            <el-form-item label="设备名称">
              <el-input v-model="query.key" placeholder="设备名称" size="small"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="handleFetch" class="register_btn" size="small">查询</el-button>
              <el-button type="success" @click="handleRef" class="register_btn" size="small">刷新</el-button>
            </el-form-item>
          </el-form>
        </el-col>
      </el-row>
    </div>
    <!--中部数据表格栏-->
    <div class="col-md-12">
      <el-row :gutter="20">
        <el-col :span="22" :offset="1" class="clearfix">
          <el-table :header-cell-style="{background: '#eef1f6', color:'#606266'}"
                    :data="mqttDeviceList"
                    :cell-style="{padding:'3px'}"
                    :row-style="{height:'30px'}"
                    :height="tableHeight" :key="isIndex" style="width: 100%" v-loading="isLoading" border stripe row-key="id">
            <el-table-column v-if="isIndex == 1" type="index" label="序号" width="75" fixed></el-table-column>
            <el-table-column prop="deviceId" label="设备名称"></el-table-column>
            <el-table-column label="操作" :width="optCulWidth">
              <template slot-scope="scope">
                <el-dropdown size="small" split-button type="success" style="margin-left: 10px;" @click="handleListen(scope.row)">订阅数据服务
                  <el-dropdown-menu slot="dropdown">
                    <el-dropdown-item @click.native="handleLoad(scope.row)">设备数据</el-dropdown-item>
                  </el-dropdown-menu>
                </el-dropdown>
              </template>
            </el-table-column>
          </el-table>
        </el-col>
      </el-row>
    </div>

  </div>
</template>
<script>
import {mapMutations} from "vuex";

import {fetchDevices, listenDevice, loadDevice} from "@/api/mqttApi.js";
import {Message} from "element-ui";


export default {
  name: "IotAdminView",
  components: {},
  data() {
    return {
      isIndex: 1,
      isLoading: false,
      currentPage: 1,
      optCulWidth: 180,
      total: 0,
      query: {
        key: '',
      },
      tableHeight: 650,
      mqttDeviceList: [],
      deviceId: "",
    }
  },
  computed: {},
  methods: {
    ...mapMutations(['add_tab']),
    handleFetch() {
      this.isLoading = true;
      fetchDevices(this.query).then(res => {
        let _res = eval(res.data);
        // console.log("res", eval(res.data))
        // 刷新页面表格
        this.mqttDeviceList = _res.list;
        this.isLoading = false;
      }).catch(err => {
        this.isLoading = false;
        this.$message.error('错了哦，这是一条错误消息' + err);
      });
    },
    /**
     * 页面详细打开drawer
     * @param params
     * @returns {Promise<*>}
     */
    info(row) {
      this.deviceId = row.id;
      this.isDrawerShow = true;
    },
    /**
     * 页面操作刷新行为
     * @param params
     * @returns {Promise<*>}
     */
    handleRef() {
      this.handleFetch();
    },
    /**
     * 页面操作停止行为
     * @param params
     * @returns {Promise<*>}
     */
    handleListen(row) {
      let params = {"deviceId": row.deviceId}
      listenDevice(params).then((res) => {
        if (res.code == 200) {
          this.$message.success("设备订阅成功！");
          this.handleFetch()
        } else {
          Message.error('设备订阅失败' + res.message);
        }
      });
    },
    handleLoad(row) {
      let params = {"deviceId": row.deviceId}
      loadDevice(params).then((res) => {
        if (res.code == 200) {
          this.handleFetch()
        }
      });
    },
    created() {
      this.handleFetch();
    },
    mounted() {
    },
  }
}
</script>
<style scoped>

.custRow {
  display: flex;
  margin-top: 5px;
  padding: 5px 5px 5px 5px;
}

</style>